<template>
  <div class="topo-toolbox">
    <div class="toolbox-group">
      <div v-for="(value, index) in data.items" :key="index">
        <div v-if="(!value.isHide || value.isHide == false) && value.isFontIcon === false" class="toolbox-item"
             draggable="true"
             @dragstart="onDragstart($event, value)">
          <div class="toolbox-item-icon">
            <img :src="value.icon" crossorigin="anonymous" style="width: 30px;height: 30px;"/>
          </div>
          <div class="toolbox-item-text">{{ value.text }}</div>
        </div>
        <div v-else class="toolbox-item-echart" draggable="true" @dragstart="onDragstart($event, value)">
          <div class="toolbox-item-icon">
            <img :src="value.icon" crossorigin="anonymous" style="width: 14vw;height: 120px;"/>
          </div>
          <div class="toolbox-item-text">{{ value.text }}</div>
        </div>
      </div>
    </div>
    <el-dialog :close-on-click-modal="false" :title="iconTitle" :visible.sync="dialogVisibleIcon" append-to-body
               width="20%">
      <div style="text-align: center;">
        <q-icon :name="iconValue" size="150px"/>
      </div>
    </el-dialog>
    <div v-if="isShow" :style="{ top: imageTop + 'px', left: 260 + 'px' }" class="imageHover">
      <div class="toolbox-item-icon">
        <el-image :src="imageHover.icon" class="topo-dom" style="height: 240px;width:440px"/>
        <div class="toolbox-item-text">{{ imageHover.text }}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'DataPanel',
  props: {
    data: Object,
  },
  data() {
    return {
      dialogVisibleIcon: false,
      iconValue: '',
      iconTitle: '',
      dialogVisibleImage: false,
      imageTitle: '',
      imageHover: {
        icon: '',
        text: ''
      },
      imageTop: 0,
      isShow: false
    }
  },
  methods: {
    imageOver(event, value) {
      // console.log("鼠标经过",event,value);
      this.imageHover = value;
      this.imageTop = event.pageY - 20
      this.isShow = true;
    },
    imageLeave() {
      // console.log('鼠标离开了');
      this.isShow = false;
    },
    onDragstart(event, info) {
      var infoJson = JSON.stringify(info.info);
      // console.log('左边栏开始拖拽',info);
      event.dataTransfer.setData('my-info', infoJson);
    },
    iconClick(value) {
      return;
      // this.dialogVisibleIcon=true;
      // this.iconValue=value;
      // this.iconTitle=value;
    },
    imageClick(label, value) {
      this.dialogVisibleImage = true;
      this.imageTitle = label;
      this.imageValue = value;
    },
  },
}
</script>

<style lang="scss" scoped>
.topo-toolbox {
  // border: #ccc solid 1px;
  background-color: #f1f3f4;
  overflow-y: auto;
  overflow-x: hidden;

  .toolbox-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: space-between;
  }

  .toolbox-item {
    width: 3.3vw;
    margin: 10px 0px;
    padding: 5px;
    color: #777;
    border: transparent solid 1px;
  }

  .toolbox-item:hover {
    border: #ccc solid 1px;
    background: #ccc;
    color: #3388ff;
    border-radius: 6px;
    cursor: pointer;
  }

  .toolbox-item-echart {
    width: 100%;
    margin: 10px 0px;
    padding: 5px;
    color: #777;
    border: transparent solid 1px;
  }

  .toolbox-item-echart:hover {
    border: #ccc solid 1px;
    background: #ccc;
    color: #3388ff;
    border-radius: 6px;
    cursor: pointer;
  }

  .toolbox-item-icon {
    text-align: center;
  }

  .toolbox-item-text {
    margin-top: 10px;
    font-size: 12px;
    text-align: center;
  }

  .imageHover {
    position: fixed;
    z-index: 999999;
    text-align: center;
    background-color: aliceblue;
  }
}
</style>
